<template>
    <el-tabs type="border-card">
        <el-tab-pane label="单选题">
            <el-form :model="singleForm" :rules="rules" ref="singleForm" style="margin-left: 75px">
                <el-form-item prop="subject">
                    <!--单选题科目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2">
                            <el-link :underline="false">科目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-select v-model="singleForm.subject" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="score">
                    <!--单选题分值-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">分值</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input-number v-model="singleForm.score" :precision="2" :step="0.5" :min="1" :max="10"></el-input-number>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="question_title">
                    <!--单选题题目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">题目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10}"
                                    placeholder="请输入内容"
                                    v-model="singleForm.question_title">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>


                <!--单选题abcd-->
                <el-form-item prop="question_a">
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">A选项</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="singleForm.question_a"
                                    maxlength="15"
                                    show-word-limit>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="question_b">
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">B选项</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="singleForm.question_b"
                                    maxlength="15"
                                    show-word-limit>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="question_c">
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">C选项</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="singleForm.question_c"
                                    maxlength="15"
                                    show-word-limit>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="question_d">
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">D选项</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="singleForm.question_d"
                                    maxlength="15"
                                    show-word-limit>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <!--答案-->
                <el-form-item prop="answer">
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">答案</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-radio-group v-model="singleForm.answer">
                                <el-radio-button label="A">A</el-radio-button>
                                <el-radio-button label="B">B</el-radio-button>
                                <el-radio-button label="C">C</el-radio-button>
                                <el-radio-button label="D">D</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                </el-form-item>

                <!--单选题难度-->
                <el-row :gutter="5" class="question text">
                    <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                        <el-link :underline="false">问题难度</el-link>
                    </el-col>
                    <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                        <el-rate
                                v-model="singleForm.degree"
                                :colors="colors">
                        </el-rate>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3" :offset="8">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定重置吗？" @confirm="resetForm('singleForm')">
                            <el-button slot="reference" type="success" plain>重置</el-button>
                        </el-popconfirm>
                    </el-col>
                    <el-col :span="3">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                title="确定录入吗？" @confirm="submitForm('singleForm')">
                            <el-button slot="reference" type="primary" plain>确定</el-button>
                        </el-popconfirm>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="判断题">
            <el-form :model="judgmentForm" :rules="rules" ref="judgmentForm" style="margin-left: 75px">
                <el-form-item prop="subject">
                    <!--判断题科目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">科目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-select v-model="judgmentForm.subject" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="score">
                    <!--判断题分值-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">分值</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input-number v-model="judgmentForm.score" :precision="2" :step="0.5" :min="1" :max="10"></el-input-number>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="question_title">
                    <!--判断题题目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">题目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10}"
                                    placeholder="请输入内容"
                                    maxlength="255"
                                    show-word-limit
                                    v-model="judgmentForm.question_title">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="answer">
                    <!--判断题答案-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">正确答案</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-radio-group v-model="judgmentForm.answer">
                                <el-radio label="1" border>正确</el-radio>
                                <el-radio label="0" border>错误</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="degree">
                    <!--判断题难度-->
                    <el-row :gutter="5" class="question text">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">问题难度</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-rate
                                    v-model="judgmentForm.degree"
                                    :colors="colors">
                            </el-rate>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="3" :offset="8">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定重置吗？" @confirm="resetForm('judgmentForm')">
                            <el-button slot="reference" type="success" plain>重置</el-button>
                        </el-popconfirm>
                    </el-col>
                    <el-col :span="3">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                title="确定录入吗？" @confirm="submitForm('judgmentForm')">
                            <el-button slot="reference" type="primary" plain>确定</el-button>
                        </el-popconfirm>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="主观题">
            <el-form :model="subjectiveForm" :rules="rules" ref="subjectiveForm" style="margin-left: 75px">
                <el-form-item prop="subject">
                    <!--主观题科目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">科目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-select v-model="subjectiveForm.subject" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="score">
                    <!--主观题分值-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">分值</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input-number v-model="subjectiveForm.score" :precision="2" :step="0.5" :min="1" :max="10"></el-input-number>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="question_title">
                    <!--主观题题目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">题目</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10}"
                                    placeholder="请输入内容"
                                    maxlength="255"
                                    show-word-limit
                                    v-model="subjectiveForm.question_title">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="answer">
                    <!--主观题题目-->
                    <el-row :gutter="5" class="question">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">参考答案</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10}"
                                    placeholder="请输入内容"
                                    maxlength="255"
                                    show-word-limit
                                    v-model="subjectiveForm.answer">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="degree">
                    <!--主观题难度-->
                    <el-row :gutter="5" class="question text">
                        <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" >
                            <el-link :underline="false">问题难度</el-link>
                        </el-col>
                        <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
                            <el-rate
                                    v-model="subjectiveForm.degree"
                                    :colors="colors">
                            </el-rate>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="3" :offset="8">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定重置吗？" @confirm="resetForm('subjectiveForm')">
                            <el-button slot="reference" type="success" plain>重置</el-button>
                        </el-popconfirm>
                    </el-col>
                    <el-col :span="3">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                title="确定录入吗？" @confirm="submitForm('subjectiveForm')">
                            <el-button slot="reference" type="primary" plain>确定</el-button>
                        </el-popconfirm>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
    export default {
        name: "AddQuestion",
        data(){
            let validateRate = (rule, value, callback) => {
                if (value === 0) {
                    callback(new Error());
                } else {
                    callback();
                }
            };
            return{
                colors : ['#99A9BF', '#F7BA2A', '#FF9900'],
                singleForm : {//单选题表单
                    subject : '',//科目
                    score : 0,//分值
                    question_title : '',//题目
                    question_a : '',//选项
                    question_b : '',//选项
                    question_c : '',//选项
                    question_d : '',//选项
                    answer : '',//答案
                    degree : 1,//难度
                },
                judgmentForm : {//判断题表单
                    subject : '',//科目
                    score : 0,//分值
                    question_title : '',//题目
                    answer : '',//答案 0=错误 1=正确
                    degree : 1,//难度
                },
                subjectiveForm : {//主观题表单
                    subject : '',//科目
                    score : 0,//分值
                    question_title : '',//题目
                    answer : '',//答案
                    degree : 1,//难度
                },
                rules: {//选择考试表单证规则
                    subject: [
                        { required: true, message: '请选择考试科目', trigger: 'change' }
                    ],
                    score: [
                        { required: true, message: '请设置问题分值', trigger: 'blur' }
                    ],
                    question_title: [
                        { required: true, message: '请设置问题题目', trigger: 'blur' }
                    ],
                    question_a: [
                        { required: true, message: '请设置a选项', trigger: 'blur' }
                    ],
                    question_b: [
                        { required: true, message: '请设置b选项', trigger: 'blur' }
                    ],
                    question_c: [
                        { required: true, message: '请设置c选项', trigger: 'blur' }
                    ],
                    question_d: [
                        { required: true, message: '请设置d选项', trigger: 'blur' }
                    ],
                    answer: [
                        { required: true, message: '请设置问题答案', trigger: 'change' }
                    ],
                },
                options: [{
                    value: '语文',
                    label: '语文'
                }, {
                    value: '数学',
                    label: '数学'
                }, {
                    value: '计算机',
                    label: '计算机'
                }, {
                    value: '历史',
                    label: '历史'
                }, {
                    value: '政治',
                    label: '政治'
                }],
            }
        },
        methods : {
            handleResponse(response){
                if (response.data === true){
                    this.$message('添加成功');
                }else {
                    this.$message.error('添加失败');
                }
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url,data;
                        if (formName === 'singleForm'){
                            url = "/admin?method=addSingle";
                            data = this.singleForm
                        }else if (formName === "judgmentForm"){
                            url = "/admin?method=addJudgment";
                            data = this.judgmentForm
                        }else if (formName === "subjectiveForm"){
                            url = "/admin?method=addSubjective";
                            data = this.subjectiveForm
                        }
                        console.log(url,data)

                        this.$axios({
                            method : "POST",
                            url : url,
                            data : data,
                        }).then((response)=>{
                            this.handleResponse(response);
                        }).catch( (error)=> {
                            this.$message.error('接口错误' + error);
                        });
                        /*if (formName === 'singleForm'){
                            this.$axios({
                                method : "POST",
                                url :"/admin?method=addSingle",
                                data : this.singleForm,
                            }).then((response)=>{
                                this.handleResponse(response);
                            }).catch( (error)=> {
                                this.$message.error('接口错误' + error);
                            });
                        }else if (formName === "judgmentForm"){
                            console.log(this.subjectiveForm)
                            this.$axios({
                                method : "POST",
                                url :"/admin?method=addJudgment",
                                data : this.judgmentForm,
                            }).then((response)=>{
                                this.handleResponse(response);
                            }).catch( (error)=> {
                                this.$message.error('接口错误' + error);
                            });
                        }else if (formName === "subjectiveForm"){
                            console.log(this.subjectiveForm)
                            this.$axios({
                                method : "POST",
                                url :"/admin?method=addSubjective",
                                data : this.subjectiveForm,
                            }).then((response)=>{
                                this.handleResponse(response);
                            }).catch( (error)=> {
                                this.$message.error('接口错误' + error);
                            });
                        }*/
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        beforeMount (){//初始化数据
        },
        mounted(){
        },
    }
</script>

<style scoped>
    .el-form{
        width: auto;
    }
    .el-row{
        margin: 10px 0;
    }
    .question span,.text{
        font-size: 20px;
        font-weight: 500;
    }
    .el-form-item{
        margin-bottom: 10px;
    }

    /*    .el-input-number__decrease,.el-input-number__increase{
            height: 38px;
        }*/
    .el-input-number__decrease, .el-input-number__increase{
        top: 2px;
    }
    .el-icon-minus,.el-icon-plus{
        line-height: 38px;
    }
</style>